<template>
  <div class="entrance_node" :class="currentView === 'update' ? 'node_border' : ''">
    <div class="nav" v-show="titleArr.length !== 1">
      <bread-crumb :titleArr = "titleArr" @back = "returnMain" :fontSize="12"></bread-crumb>
    </div>
    <keep-alive>
      <!-- 组件在 vm.currentview 变化时改变！-->
      <component v-bind:is="currentView"
                 @edit = "edit"
                 :random="random"
                 :dataId="dataId"
                 @refresh="refresh"
                 @back="returnMain"
                 :todoType="todoType"></component>
    </keep-alive>
  </div>
</template>
<script>
import breadCrumb from '@/components/ui-modules/breadCrumb/BreadCrumbConfig.vue'
import search from '../../../base/search.vue'
import list from './welcomeNodeList.vue'
import update from './welcomeNodeEdit.vue'
import * as types from '@modules/config/channelConfig/webchatSchdule/mutation-types.js'
//  import { deepClone } from '@utils/m7Utils.js'
export default {
  name: 'welcomeNode',
  data () {
    return {
      titleArr: [this.$t('config.channel.nodeManage')],
      currentView: 'list',
      isAdd: false,
      currentPage: 1,
      count: 0,
      pageSize: 10,
      random: 1,
      todoType: 'add',
      dataId: ''
    }
  },
  methods: {
    edit (obj) {
      this.currentView = 'update'
      this.random = Math.random()
      if (obj) {
        this.titleArr.splice(1, 2, this.$t('configLazyLoad.process.welcome1'))
        this.todoType = 'update'
        this.dataId = obj._id
      } else {
        this.titleArr.splice(1, 2, this.$t('configLazyLoad.process.welcome2'))
        this.todoType = 'add'
        this.dataId = ''
      }
    },
    refresh () {
      let random = Math.random()
      this.$store.commit(types.SET_RELOAD_NODE, random)
    },
    returnMain () {
      this.titleArr = [this.$t('config.channel.nodeManage')]
      this.isAdd = false
      this.currentView = 'list'
      // 为了返回主界面能刷新一下设定的，没有好的其他办法
      this.random = Math.random()
      this.refresh()
    },
    nodeChange () {
      let data = []
      this.allNode.forEach((item) => {
        if (item.type === 'welcome') {
          data.push(item)
        }
      })
      this.$store.commit(types.RESET_WEBCHAT_SCHDULE_LIST_NODE, {node: 'welcomeNode', data: data})
    }
  },
  watch: {
    allNode (cur) {
      this.nodeChange()
    }
  },
  props: {
    allNode: {
      type: Array,
      default: function () {
        return []
      }
    }
  },
  beforeMount () {
    this.nodeChange()
  },
  components: {
    breadCrumb,
    search,
    list,
    update
  }
}
</script>
<style lang="stylus" scoped>
  .node_border
    border 1px solid #e7e7eb
  .entrance_node
    margin-top 10px
</style>
